import { EmployeeModel } from '@/pages/person/data';
import { ProFormInstance, ProList } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import { message, Modal, Space, Tag } from 'antd';
import React, { cloneElement, useCallback, useRef, useState } from 'react';
import { PointModel } from '../data';

export type EditFormProps = {
  trigger?: JSX.Element;
  onOk?: () => void;
  initialValues?: Partial<EmployeeModel.employeeResponse>;
};

const EditForm: React.FC<EditFormProps> = ({ onOk, trigger, initialValues }) => {
  const [messageApi, contextHolder] = message.useMessage();
  const [modalVisit, setModalVisit] = useState(false);
  const editFormRef = useRef<ProFormInstance>();
  /* const intl = useIntl(); */
  const onCancel = useCallback(() => {
    setModalVisit(false);
  }, []);

  const onOpen = useCallback(() => {
    setModalVisit(true);
  }, []);
  return (
    <>
      {contextHolder}
      {trigger
        ? cloneElement(trigger, {
            onClick: onOpen,
          })
        : null}
      <Modal
        width="1000px"
        title={initialValues ? '修改' : '新增'}
        open={modalVisit}
        footer={null}
        onCancel={onCancel}
      >
        <ProList<PointModel.GithubIssueItem>
          search={{}}
          rowKey="name"
          headerTitle="基础列表"
          request={async (params = {} as Record<string, any>) =>
            request<{
              data: PointModel.GithubIssueItem[];
            }>('https://proapi.azurewebsites.net/github/issues', {
              params,
            })
          }
          pagination={{
            pageSize: 5,
          }}
          showActions="hover"
          metas={{
            title: {
              dataIndex: 'user',
              title: '序列号',
            },
            avatar: {
              dataIndex: 'avatar',
              search: false,
            },
            description: {
              dataIndex: 'title',
              search: false,
            },
            subTitle: {
              dataIndex: 'labels',
              render: (_, row) => {
                return (
                  <Space size={0}>
                    {row.labels?.map((label: { name: string }) => (
                      <Tag color="blue" key={label.name}>
                        {label.name}
                      </Tag>
                    ))}
                  </Space>
                );
              },
              search: false,
            },
            actions: {
              render: (text, row) => [
                <a href={row.url} target="_blank" rel="noopener noreferrer" key="link">
                  链路
                </a>,
                <a href={row.url} target="_blank" rel="noopener noreferrer" key="warning">
                  报警
                </a>,
                <a href={row.url} target="_blank" rel="noopener noreferrer" key="view">
                  查看
                </a>,
              ],
              search: false,
            },
            status: {
              // 自己扩展的字段，主要用于筛选，不在列表中显示
              title: '模块',
              valueType: 'select',
              valueEnum: {
                open: {
                  text: '门禁',
                  status: 'Error',
                },
                closed: {
                  text: '考勤',
                  status: 'Success',
                },
                processing: {
                  text: '消费',
                  status: 'Processing',
                },
              },
            },
          }}
        />
      </Modal>
    </>
  );
};

export default EditForm;
